<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看运动目标 | VigorLoop</title>


    <!--STYLESHEET-->
    <!--=================================================-->

    <!--Open Sans Font [ OPTIONAL ]-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/bootstrap.min.css" rel="stylesheet">


    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo-icons.min.css" rel="stylesheet">


    <!--Demo [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo.min.css" rel="stylesheet">


    <!--DataTables [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/datatables/media/css/dataTables.bootstrap.css" rel="stylesheet">
    <link href="/static/nifty/plugins/datatables/extensions/Responsive/css/dataTables.responsive.css" rel="stylesheet">


    <!--JAVASCRIPT-->
    <!--=================================================-->

    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="/static/nifty/plugins/pace/pace.min.css" rel="stylesheet">
    <script src="/static/nifty/plugins/pace/pace.min.js"></script>


    <!--jQuery [ REQUIRED ]-->
    <script src="/static/nifty/js/jquery-2.2.4.min.js"></script>


    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/bootstrap.min.js"></script>


    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/nifty.min.js"></script>


    <!--=================================================-->

    <!--Demo script [ DEMONSTRATION ]-->
    <script src="/static/nifty/js/demo/nifty-demo.min.js"></script>


    <!--DataTables [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/datatables/media/js/jquery.dataTables.js"></script>
    <script src="/static/nifty/plugins/datatables/media/js/dataTables.bootstrap.js"></script>
    <script src="/static/nifty/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>


    <!--DataTables Sample [ SAMPLE ]-->
    <script src="/static/nifty/js/demo/tables-datatables.js"></script>


</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">

            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="" class="navbar-brand">
                    <img src="/static/nifty/img/logo.png" alt="VigorLoop Logo" class="brand-icon">
                    <div class="brand-title">
                        <span class="brand-text">VigorLoop</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->


            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content clearfix">
                <ul class="nav navbar-top-links pull-left">

                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <i class="demo-pli-view-list"></i>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->


                </ul>
                <ul class="nav navbar-top-links pull-right">

                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                <span class="pull-right">
                                    <!--<img class="img-circle img-user media-object" src="/static/nifty/img/profile-photos/1.png" alt="Profile Picture">-->
                                    <i class="demo-pli-male ic-user"></i>
                                </span>
                            <div class="username hidden-xs">
                                {% if user.is_authenticated %}{{ user.username }}{% else %}未登录用户{% endif %}</div>
                        </a>


                        <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">

                            <!-- Dropdown heading  -->
                            <div class="pad-all bord-btm">
                                欢迎使用 VigorLoop！
                            </div>


                            <!-- User dropdown menu -->
                            <ul class="head-list">
                                <li>
                                    <a href="/user_center/">
                                        <i class="demo-pli-male icon-lg icon-fw"></i> 个人中心
                                    </a>
                                </li>

                            </ul>

                            <!-- Dropdown footer -->
                            <div class="pad-all text-right">
                                <a href="/logout/" class="btn btn-primary">
                                    <i class="demo-pli-unlock"></i> 退出
                                </a>
                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->
                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->

        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">

            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title">
                <div id="page-title">
                    <h1 class="text-lg-center">目标定，动力生</h1>
                </div>
            </div>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End page title-->

            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">

                <div class="row">
                    <div class="col-xs-12">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">运动目标一览</h3>

                            </div>

                            <!--Bordered Table-->
                            <!--===================================================-->

                            <div class="panel-body">
                                <p class="panel-info"> 共设定{{total_count}}项目标，
                                    其中{{ complete_count }}项已完成，
                                    {{doing_count }}项正在进行中，
                                    {{ uncomplete_count }}项截止前未完成
                                </p>
                                <table id="exercise-goal-table" class="table table-striped table-bordered"
                                       cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th class="text-center">运动目标序号</th>
                                            <th class="text-center">目标类型</th>
                                            <th class="text-center">开始时间</th>
                                            <th class="text-center">截止时间</th>
                                            <th class="text-center">目标消耗卡路里</th>
                                            <th class="text-center">目标完成情况</th>
                                            <th class="text-center">操作</th> <!-- 新增操作列 -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for goal_data in goals %}
                                        <tr>
                                            <td class="text-center">{{ forloop.counter }}</td>
                                            <td class="text-center">{{ goal_data.goal.type }}</td>
                                            <td class="text-center"><span class="text-muted"><i
                                                    class="fa fa-clock-o"></i> {{ goal_data.goal.start_time|date:"Y-m-d H:i:s" }}</span>
                                            </td>
                                            <td class="text-center"><span class="text-muted"><i
                                                    class="fa fa-clock-o"></i> {{ goal_data.goal.end_time|date:"Y-m-d H:i:s" }}</span>
                                            </td>
                                            <td class="text-center">{{ goal_data.goal.target_calorie_cost }}大卡</td>
                                            <td class="text-center">
                                                {% if goal_data.is_completed %}
                                                    <span class="badge badge-success">100%</span>
                                                {% else %}
                                                    {% if goal_data.timeout != 0 %}
                                                        <span class="badge badge-icon">{{ goal_data.progress|floatformat:2 }}%</span>
                                                    {% else %}
                                                        {% if goal_data.progress > 75 %}
                                                            <span class="badge badge-info">{{ goal_data.progress|floatformat:2 }}%</span>
                                                        {% elif goal_data.progress > 50 %}
                                                            <span class="badge badge-mint">{{ goal_data.progress|floatformat:2 }}%</span>
                                                        {% elif goal_data.progress > 30 %}
                                                            <span class="badge badge-warning">{{ goal_data.progress|floatformat:2 }}%</span>
                                                        {% else %}
                                                            <span class="badge badge-danger">{{ goal_data.progress|floatformat:2 }}%</span>
                                                        {% endif %}
                                                    {% endif %}
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                <!-- 删除按钮 -->
                                                <form method="POST"
                                                      action="{% url 'delete_exercise_goal' goal_data.goal.exercise_goal_id %}">
                                                    {% csrf_token %}
                                                    <button type="submit" class="btn btn-danger btn-sm delete-btn">
                                                        删除
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="7">暂未制定目标。</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!--===================================================-->
                            <!--End Bordered Table-->
                        </div>
                        <script>
                            $.fn.dataTable.ext.errMode = 'none';       //屏蔽掉报错弹窗

                            var rowSelection = $('#exercise-goal-table').DataTable({
                                "responsive": true,
                                "language": {
                                    "paginate": {
                                        "previous": '<i class="demo-psi-arrow-left"></i>',
                                        "next": '<i class="demo-psi-arrow-right"></i>'
                                    }
                                }
                            });

                            $(document).ready(function () {
                                // 监听所有删除按钮的点击事件
                                $('.delete-btn').click(function () {
                                    // 获取当前按钮所绑定的 exercise_id
                                    var exerciseGoal_id = $(this).data('exercise-goal-id');
                                    var row = $(this).closest('tr');  // 获取当前按钮所在的表格行
                                    // 发送 AJAX 请求到删除的 URL
                                    $.ajax({
                                        url: '/exercise_info/delete_exercise_goal/' + exerciseGoal_id + '/',  // 删除请求的 URL，包含 exercise_id
                                        type: 'POST',  // 使用 POST 方法
                                        data: {
                                            'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val(),  // 传递 CSRF 令牌
                                        },
                                    });
                                });
                            });
                        </script>
                    </div>
                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->


        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->


        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav id="mainnav-container">
            <div id="mainnav">

                <!--Menu-->
                <!--================================-->
                <div id="mainnav-menu-wrap">
                    <div class="nano">
                        <div class="nano-content">

                            <!--Profile Widget-->
                            <!--================================-->
                            <div id="mainnav-profile" class="mainnav-profile">
                                <div class="profile-wrap">
                                    <div class="pad-btm">
                                        <img class="img-circle img-sm img-border"
                                             src="/static/nifty/img/profile-photos/1.png" alt="Profile Picture">
                                    </div>
                                    <a href="#profile-nav" class="box-block" data-toggle="collapse"
                                       aria-expanded="false">
                                        <p class="mnp-name">
                                            {% if user.is_authenticated %}{{ user.username }}{% else %}
                                                未登录用户{% endif %}</p>
                                    </a>
                                </div>
                            </div>

                            <ul id="mainnav-menu" class="list-group">

                                <!--Category name-->
                                <li class="list-header">健康中心</li>

                                <!--Menu list item-->
                                <li>
                                    <a href="/index/">
                                        <i class="demo-psi-home"></i>
                                        <span class="menu-title">
												<strong>首页</strong>
											</span>
                                    </a>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="#">
                                        <i class="demo-psi-boot-2"></i>
                                        <span class="menu-title">
												<strong>我的运动数据</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="/exercise_info/exercise_record/">查看运动数据</a></li>
                                        <li><a href="/exercise_info/add_exercise_record/">新增运动数据</a></li>
                                    </ul>
                                </li>

                                <li class="active-sub active">
                                    <a href="#">
                                        <i class="demo-psi-star"></i>
                                        <span class="menu-title">
												<strong>我的运动目标</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li class="active-link"><a href="/exercise_info/exercise_goal/">查看运动目标</a>
                                        </li>
                                        <li><a href="/exercise_info/add_exercise_goal/">新增运动目标</a></li>
                                    </ul>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="/health_profile/">
                                        <i class="demo-psi-receipt-4"></i>
                                        <span class="menu-title">
												<strong>我的健康数据</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="/health_profile/">查看健康数据</a></li>
                                        <li><a href="/health_profile/add/">新增健康数据</a></li>
                                        <li><a href="/health_profile/analysis">健康分析</a></li>
                                    </ul>
                                </li>

                                <li class="list-divider"></li>

                                <!--Category name-->
                                <li class="list-header">其他</li>

                                <!--Menu list item-->
                                <li>
                                    <a href="/user_center/">
                                        <i class="demo-psi-male"></i>
                                        <span class="menu-title">
												<strong>个人中心</strong>
											</span>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!--================================-->
                <!--End menu-->

            </div>
        </nav>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer">

        <!-- Visible when footer positions are fixed -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="show-fixed pull-left">
            You have <a href="#" class="text-bold text-main"><span class="label label-danger">3</span> pending
            action.</a>
        </div>

        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Remove the class "show-fixed" and "hide-fixed" to make the content always appears. -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <p class="pad-lft">&#0169; 2024 VigorLoop</p>


    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->

</div>
<!--===================================================-->
<!-- END OF CONTAINER -->
</div>
</body>

</html>